<!-- 设备离线监控 -->
<template>
  <div class="container">
    <div class="title">设备掉线记录</div>
    <div class="topBox">
      <span>设备总数:50 </span> 
      <span>掉线数量:2</span> 
      <span>已备注的设备数量:1</span>
    </div>
    <el-table :data="list" style="width: 100%" height="700px">
        <el-table-column prop="bedName" label="床位名称" ></el-table-column>
        <el-table-column prop="offlineTime" label="掉线时间" ></el-table-column>
        <el-table-column prop="offlineDuration" label="掉线时长"></el-table-column>
        <el-table-column prop="remark" label="备注"></el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button
              @click="handleClick(scope.row)"
              type="text"
              size="small"
              >添加备注</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="controlBox"
        style="margin-top:20px"
        background 
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 20, 40]" 
        :page-size="pagesize"         
        layout="total, sizes, prev, pager, next, jumper"
        :total="list.length">    
      </el-pagination>
  </div>
</template>

<script>
export default {
  components: {

  },
  data() {
    return {
      currentPage:1,  //  初始页
      pagesize:10,    //  每页的数据
      list:[
        {
          bedName: "WS254",
          offlineTime: "2020-10-11 09:23:23",
          offlineDuration: "1天4时32分",
          remark: "设备故障，等待维修",
        },
        {
          bedName: "WS254",
          offlineTime: "2020-10-11 09:23:23",
          offlineDuration: "1天4时32分",
          remark: "设备故障，等待维修",
        },
      ]
    }
  },
  methods: {
    handleClick(row) {
      console.log(row);
    },
    // 初始页currentPage、初始每页数据数pagesize和数据data
    handleSizeChange: function (size) {
        this.pagesize = size;
        console.log(this.pagesize)  //每页下拉显示数据
    },
    handleCurrentChange: function(currentPage){
        this.currentPage = currentPage;
        console.log(this.currentPage)  //点击第几页
    },
  },
  computed: {

  },
  watch: {

  },
  created() {

  },
  mounted() {

  },
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {},
}

</script>
<style lang='scss' scoped>
.container{
  padding:20px;
  .title {
      font-size: 22px;
      font-weight: 600;
      color: #666;
    }
  .topBox{
    color: #666;
    padding:14px 0;
    :not(:last-child){
      padding-right: 10px;
    }
  } 
}
</style>
